<template>
  <div class="login_wrap">
    <div class="login_denglu">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model.trim="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <!-- <el-input v-model="form.password"></el-input> -->
          <el-input
            placeholder="请输入密码"
            v-model.trim="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :plain="true" @click="onLogin"
            >登录</el-button
          >
          <el-button type="primary" @click="goRegister">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        password: "",
      },
    };
  },
  methods: {
    onLogin() {
      // console.log("登录");
      // console.log(this.form.name, this.form.password);
      // 在登录当中触发actions当中的login_a方法
      this.$store.dispatch("login_a", {
        user_name: this.form.name,
        password: this.form.password,
      });
    },
    goRegister() {
      // 点击注册按钮跳转到注册页面
      console.log("去注册页面");
      this.$router.push({
        name: "register",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login_wrap {
  background-image: url("~@a/img/bggrey.jpg");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_denglu {
    // 目的：让注册框水平垂直居中
    // background-color: red;
    background-image: url("~@a/img/bggrey.jpg");
    background-size: 100% 100%;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>